import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/core/utils/ati_color.dart';
import 'package:ati_package/core/utils/ati_font.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class RechargeRecordView extends StatefulWidget {
  const RechargeRecordView({super.key});

  @override
  State<RechargeRecordView> createState() => _RechargeRecordViewState();
}

class _RechargeRecordViewState extends State<RechargeRecordView>
    with SingleTickerProviderStateMixin {
  TabController? tabController;
  final List<String> tabs = ['所有', '审核中', '已到账', '已驳回'];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void dispose() {
    tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      title: '充值记录',
      body: Column(
        children: [
          buildTabBar(),
          Expanded(
            // 👈 关键，让 TabBarView 填满剩余空间
            child: TabBarView(
              controller: tabController,
              children: [
                buildListContent('热门兑换内容'),
                buildListContent('热门兑换内容'),
                buildListContent('热门兑换内容'),
                buildListContent('热门兑换内容'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  buildTabBar() {
    return Material(
      color: Colors.transparent,
      child: Container(
        height: 35.r,
        margin: EdgeInsets.symmetric(horizontal: 16.r, vertical: 12.5.r),
        child: TabBar(
          onTap: (value) {},
          controller: tabController,
          isScrollable: true,
          indicator: BoxDecoration(),
          tabAlignment: TabAlignment.start,
          dividerColor: Colors.transparent,
          indicatorColor: Colors.transparent, // 我们自己画 indicator
          splashFactory: NoSplash.splashFactory,
          overlayColor: WidgetStateProperty.all(Colors.transparent),
          labelPadding: EdgeInsets.only(
            right: 10.r,
            // top: 10.r,
          ), // ⚠️ 去掉 TabBar 自带 padding
          tabs: tabs.map((title) {
            final isSelected =
                tabController?.index == tabs.indexOf(title); // 当前是否选中

            return Tab(
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 17.5.r,
                  vertical: 5.r,
                ), // ✅ 文字与边距
                decoration: BoxDecoration(
                  color: isSelected ? AtiColor.primary : Colors.white,
                  borderRadius: BorderRadius.circular(20.r),
                ),
                child: Text(
                  title,
                  style: TextStyle(
                    fontSize: 14.r,
                    fontWeight: FontWeight.w600,
                    color: isSelected ? Colors.white : AtiColor.textColor1,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  Widget buildListContent(String title) {
    return Container(
      margin: EdgeInsets.only(left: 16.r, right: 16.r),
      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.only(
              top: 8.r,
              bottom: 10.r,
              left: 16.r,
              right: 16.r,
            ),
            margin: EdgeInsets.only(bottom: 12.r),

            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.r),
            ),

            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Text(
                      '2025-11-09 21:43:43',
                      style: TextStyle(
                        fontSize: AtiFont.font12,
                        color: AtiColor.textColor1,
                      ),
                    ),
                    Spacer(),
                    Text(
                      '审核中',
                      style: TextStyle(
                        fontSize: AtiFont.font12,
                        color: AtiColor.textColor1,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 5.r),
                Text.rich(
                  TextSpan(
                    children: [
                      TextSpan(
                        text: '充值数量：',
                        style: TextStyle(
                          color: AtiColor.textColor1,
                          fontWeight: FontWeight.w500,
                          fontSize: 14.r,
                        ),
                      ),
                      TextSpan(
                        text: '23480',
                        style: TextStyle(
                          color: Colors.green,
                          fontWeight: FontWeight.bold,
                          fontSize: 20.r,
                        ),
                      ),
                      TextSpan(
                        text: " USDT",
                        style: TextStyle(
                          color: AtiColor.textColor1,
                          fontWeight: FontWeight.w500,
                          fontSize: 14.r,
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 1.r,
                  margin: EdgeInsets.symmetric(vertical: 5.r),
                  decoration: BoxDecoration(color: AtiColor.pageColor),
                ),
                Text(
                  '钱包类型：TRC20',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textGreyColor,
                  ),
                ),
                Text(
                  '钱包地址：T9z2kvNgUNTxBdvFsqecT9z2kvNgUNTxB',
                  style: TextStyle(
                    fontSize: AtiFont.font12,
                    color: AtiColor.textGreyColor,
                  ),
                ),
              ],
            ),
          ).addTapGesture(onTap: () {});
        },
      ),
    );
  }
}
